<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <style>
        .man{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .woman{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        img{
            width: 100px;
            height: 100px;
            display: block;
        }
        .other{
            width: 100px;
            height: 100px;
            background-color: rgb(18, 165, 50);
        }
        ul > li{
            list-style: none;
            width: 100px;
            border: 1px solid rgb(228, 204, 204);
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-text="message"></div>
    <div v-html="message"></div>
    <div v-if="gender=='男'" class="man"></div>
    <div v-else-if="gender=='女'" class="woman"></div>
    <div v-else class="other"></div>
    <img v-show="isShow" v-bind:src="url">
    <ul>
        <li v-for="(item, index) in list" :key="item.id">{{ index }}-{{ item.name }}</li>
    </ul>
    <input type="text" v-bind:value="str?str:'默认值'" >
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'<h2>hello world</h2>',
            gender:'百米',
            isShow:true,
            url:'./logo.png',
            list:[
                {name:'大师兄',id:11},
                {name:'二师兄',id:22},
                {name:'三师兄',id:33}
            ],
            str:''
        },
    });
</script>
</body>
</html>